<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Event Detail</title>

    <style type="text/css">
        .nameColumn { width: 200px }
        .descriptionColumn { width: 400px }
    </style>
</head>
<body>
<f:view>
<h1>Event Details</h1><br/>
	<h:form id="myEventsForm">
		<table border="1">
		<tr><th>Name</th><th><h:outputText value="Description" /></th><th><h:outputText value="StartDate" /></th><th>StartTime</th><th>EndDate</th><th>EndTime</th></tr>
		<tr><td><h:outputText value="#{futureEventDetailHandler.event.name}" /></td>
			<td><h:outputText value="#{futureEventDetailHandler.event.description}" />
            </td>
			<td>
				<h:outputText value="#{futureEventDetailHandler.event.startDate}">
	            	<f:convertDateTime type="date" pattern="MM/dd/yyyy" timeZone="America/Chicago"/>
	            </h:outputText>
            </td>
			<td>
				<h:outputText value="#{futureEventDetailHandler.event.startDate}">
					<f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" />
				</h:outputText>
			</td>
			<td> <h:outputText value="#{futureEventDetailHandler.event.endDate}" >
            	<f:convertDateTime type="date" pattern="MM/dd/yyyy" timeZone="America/Chicago"/>
            </h:outputText></td>
			<td>
				<h:outputText value="#{futureEventDetailHandler.event.endDate}">
					<f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" />
				</h:outputText>
			</td>
			
		</tr></table>
		<br><br>	 		
            	
			
           
           
	    
        Click on the button to signup for position or timeslot
        <h:dataTable value="#{futureEventDetailHandler.openPositionTimeslot}" var="pos"
            columnClasses="nameColumn, startDateColumn,endDateColumn,eventCoordinatorColumn"     border="1">
	        <h:column>
	            <f:facet name="header"><h:outputText value="Position" /> </f:facet>
	            <h:outputText value="#{pos.name}"/>
	            	
	        </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="StartTime" /> </f:facet>
	            <h:outputText value="#{pos.startTime}">
	             <f:convertDateTime type="time" pattern="hh:mm a" timeZone="America/Chicago"/>
	             </h:outputText>
	        </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="EndTime" /> </f:facet>
	            <h:outputText value="#{pos.endTime}">
	            <f:convertDateTime type="time" pattern="hh:mm a" timeZone="America/Chicago"/>
	            	 </h:outputText>
	         </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="Required Volunteers" /> </f:facet>
	            <h:outputText value="#{pos.requiredVolunteers}" />	
	        </h:column>
	        <h:column>
	            <f:facet name="header"></f:facet>
	            <h:commandButton action="#{confirmationHandler.confirmVolunteer}" value="Signup">
	            	<f:param name="eventName"  value="#{pos.eventId}"/>
	            	<f:param name="slotId"  value="#{pos.id}"/>
	            	<f:param name="positionName"  value="#{pos.name}"/>
	            	<f:param name="startTime"  value="#{pos.startTime}"/>
	            	<f:param name="endTime"  value="#{pos.endTime}"/>
	            	<f:param name="slotType"  value="#{pos.slotType}"/>
	            </h:commandButton>
	        </h:column>
	        
    	</h:dataTable>
    </h:form>
</f:view>
</body>
</html>